<!-- dashboard.html -->
<div class="dashboard-container">
    <h2>MQTT Broker 仪表盘</h2>

    <!-- 指标卡片组 -->
    <div class="stats-grid">
        <div class="stat-card">
            <h3>当前连接</h3>
            <p id="active-clients" class="stat-value">--</p>
        </div>
        <div class="stat-card">
            <h3>主题订阅</h3>
            <p id="topic-count" class="stat-value">--</p>
        </div>
        <div class="stat-card">
            <h3>消息收发</h3>
            <p id="total-messages" class="stat-value">--</p>
        </div>
        <div class="stat-card">
            <h3>运行时长</h3>
            <p id="run-time" class="stat-value" style="font-size: x-large">--</p>
        </div>
    </div>

    <!-- 配置信息表格 -->
    <div class="config-section">
        <h3>服务器配置信息</h3>
        <table class="config-table">
            <tbody>
            <tr><th>监听端口</th><td id="port">--</td></tr>
            <tr><th>协议版本</th><td id="protocol-version">--</td></tr>
            <tr><th>持久化存储</th><td id="persistence">--</td></tr>
            <tr><th>最大连接队列</th><td id="max-client-queue">--</td></tr>
            <tr><th>连接保持</th><td id="keep-alive">--</td></tr>
            </tbody>
        </table>
    </div>
</div>
